<template>
  <div class="mainsu">
    <div class="main_spac1">
      <div class="main_white padding10 paddingBottom20">
        <div class="mainor_form">
          <el-form
            :inline="true"
            :model="form"
            class="demo-form-inline"
            ref="userListFrom"
            label-width="90px"
            id="form"
          >
            <el-form-item label="业务员：" prop="salesman_id">
              <el-select
                class="wid220"
                v-model.trim="form.salesman_id"
                placeholder="业务员"
              >
                <el-option label="所有" value=""></el-option>
                <el-option
                  v-for="(item, index) in salesman_list"
                  :key="index"
                  :label="item"
                  :value="parseInt(index)"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="账期：" prop="payment_days">
              <el-date-picker
                v-model="form.payment_days"
                type="month"
                placeholder="选择月"
                value-format="yyyy-MM"
              >
              </el-date-picker>
            </el-form-item>
            <MainFormBtn @reset="reset" @getSearchFor="getArticleList" :loading="listLoading" :showBtn="false">
              <el-button @click="handleExport(1)" v-repeatClick>导出</el-button>
            </MainFormBtn>
          </el-form>
        </div>
        <div class="main_num boxdq marginTop10"></div>
        <div class="main_table marginTop10" style="min-height: 550px">
          <el-table
            ref="multipleTable"
            v-loading="listLoading"
            :data="list"
            element-loading-text="加载中"
            fit
            border
            highlight-current-row
          >
            <!-- @selection-change="handleSelectionChange"
            :summary-method="getSummaries" show-summary
            <el-table-column type="selection" /> -->
            <el-table-column
              label="业务员"
              prop="salesman"
              show-overflow-tooltip
            >
            </el-table-column>

            <el-table-column
              label="账期"
              prop="payment_days"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              label="订单数量"
              prop="order_num"
              show-overflow-tooltip
              min-width="90"
            />
            <el-table-column
              label="配送金额"
              prop="send_money"
              show-overflow-tooltip
              min-width="90"
            />
            <el-table-column
              label="退货金额"
              prop="return_money"
              show-overflow-tooltip
              min-width="90"
            />
            <el-table-column
              label="实配送金额"
              prop="real_money"
              show-overflow-tooltip
              min-width="90"
            />
            <el-table-column
              label="账单金额"
              prop="account_money"
              show-overflow-tooltip
              min-width="90"
            >
              <template slot="header">
                <div class="header_tips">
                  <span>账单金额</span>
                  <el-tooltip class="item" effect="dark" placement="bottom">
                    <div slot="content">
                      注释：=在线支付账单金额(已减退货金额)+货到付款账单金额(已减退货金额)
                    </div>
                    <svg
                      aria-hidden="true"
                      class="navbar_svg new_navbar_svg"
                      width="14"
                      height="14"
                    >
                      <use xlink:href="#icon-summary_question" />
                    </svg>
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="实收金额"
              prop="collect_money"
              min-width="90"
              show-overflow-tooltip
            >
              <template slot="header">
                <div class="header_tips">
                  <span>实收金额</span>
                  <el-tooltip class="item" effect="dark" placement="bottom">
                    <div slot="content">
                      注释：=在线支付账单金额(已减退货金额)+货到付款账单收款金额(已减退货金额)
                    </div>
                    <svg
                      aria-hidden="true"
                      class="navbar_svg new_navbar_svg"
                      width="14"
                      height="14"
                    >
                      <use xlink:href="#icon-summary_question" />
                    </svg>
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="管理操作"
              align="center"
              fixed="right"
              width="180"
              class-name="main_hei"
            >
              <template slot-scope="scope">
                <el-link type="warning" @click="handleDrawer(scope, 1)"
                  >订单</el-link
                >
                <el-link type="success" @click="handleDrawer(scope, 2)"
                  >分类</el-link
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="main_page boxdq">
          <div></div>
          <!-- 分页 -->
          <div class="main_page_r">
            <MainPagination
              :current-page="current.page"
              :page-sizes="[20, 30, 50, 100]"
              :page-size="limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount"
              background
              @size-change="(pageSize) => changeLimit(pageSize, 1)"
              @current-change="(page) => changePage(page, 1)"
            />
          </div>
        </div>
      </div>
      <el-drawer
        class="report_drawer drawer_min900"
        :title="drawer_title"
        size="50%"
        :visible.sync="goods_drawer"
        direction="rtl"
        @closed="closedDrawer"
      >
        <div class="drawer_container">
          <div class="drawer_container_header">
            <div class="heder_left">
              <span>{{ drawer_header_title }}</span>
              <span>{{ drawer_header_payment_days }}</span>
            </div>
            <div class="header_right">
              <el-button type="primary" @click="handleExport(2)" v-repeatClick
                >导出</el-button
              >
            </div>
          </div>
          <div class="drawer_container_main">
            <div class="main_table marginTop10" style="min-height: 400px">
              <el-table
                ref="multipleTable"
                v-loading="drawer_listLoading"
                :data="drawer_list"
                element-loading-text="加载中"
                fit
                border
                highlight-current-row
                :header-cell-class-name="this.$verticaline"
                v-show="drawer_table == 1"
              >
                <el-table-column label="序号" width="80" show-overflow-tooltip>
                  <template slot-scope="scope">
                    {{ scope.$index + 1 }}
                  </template>
                </el-table-column>
                <el-table-column
                  label="订单号"
                  prop="order_sn"
                  show-overflow-tooltip
                  min-width="120"
                />
                <el-table-column
                  label="用户名称"
                  prop="nickname"
                  show-overflow-tooltip
                />
                <el-table-column
                  label="配送金额"
                  prop="send_money"
                  show-overflow-tooltip
                />
                <el-table-column
                  label="退货金额"
                  prop="return_money"
                  show-overflow-tooltip
                />
                <el-table-column
                  label="实配送金额"
                  prop="real_send_money"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  label="账单金额"
                  prop="account_money"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  label="实收金额"
                  prop="real_money"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  label="配送日期"
                  prop="order_sn"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    {{ parseTime(scope.row.send_time, "{y}-{m}-{d}") }}
                  </template>
                </el-table-column>
              </el-table>
              <el-table
                ref="multipleTable"
                v-loading="drawer_listLoading"
                :data="drawer_list"
                element-loading-text="加载中"
                fit
                border
                highlight-current-row
                :header-cell-class-name="this.$verticaline"
                v-show="drawer_table == 2"
              >
                <el-table-column label="序号" width="80" show-overflow-tooltip>
                  <template slot-scope="scope">
                    {{ scope.$index + 1 }}
                  </template>
                </el-table-column>
                <el-table-column
                  label="一级分类名称"
                  prop="category_name"
                  show-overflow-tooltip
                />
                <el-table-column
                  label="配送金额"
                  prop="send_money"
                  show-overflow-tooltip
                />
                <el-table-column
                  label="退货金额"
                  prop="return_money"
                  show-overflow-tooltip
                />
                <el-table-column
                  label="实配送金额"
                  prop="real_money"
                  show-overflow-tooltip
                />
              </el-table>
            </div>
            <div class="main_page boxdq">
              <div></div>
              <!-- 分页 -->
              <div class="main_page_r">
                <el-pagination
                  :current-page="drawer_current.page"
                  :page-sizes="[20, 30, 50, 100]"
                  :page-size.sync="drawer_limit"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="drawer_totalCount"
                  background
                  @size-change="(pageSize) => changeLimit(pageSize, 2)"
                  @current-change="(page) => changePage(page, 2)"
                />
              </div>
            </div>
          </div>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import {
  salesman_feat,
  salesman_featOrder,
  salesman_featCategory,
  salesman_getSalesman,
  exportFeat,
  exportFeatOrder,
  exportFeatCategory,
} from "@/api/financial/SalesmanPerformance";
import { exportMethod, parseTime } from "@/utils/index";

export default {
  components: {},
  computed: {},
  data() {
    return {
      exportMethod,
      parseTime,
      // 分页
      current: {
        page: 1,
        per_page: 20,
      },
      limit: 20,
      totalCount: 1,
      // 列表数据
      list: [],
      listLoading: false,
      // 搜索
      form: {
        payment_days: parseTime(new Date(), "{y}-{m}"),
        salesman_id: "",
      },
      salesman_list: {},
      addedFormVisible: false,
      selectArr: [],
      goods_drawer: false, //商品明细抽屉
      drawer_title: "订单业绩",
      drawer_header_title: "业务员",
      drawer_header_payment_days: "",
      drawer_table: 1,
      drawer_list: [],
      drawer_listLoading: false,
      // 分页
      drawer_current: {
        page: 1,
        per_page: 20,
      },
      drawer_limit: 20,
      drawer_totalCount: 1,
      drawer_form: {
        payment_days: "",
        salesman_id: "",
      },
    };
  },
  created() {
    this.salesman_getSalesman();
    // 列表
    this.salesman_feat();
  },
  methods: {
    // 监听全选
    handleSelectionChange(val) {
      this.selectArr = [];
      val.map((item) => {
        this.selectArr.push(item.id);
      });
    },

    // 搜索
    getArticleList() {
      this.current.page = 1;
      this.salesman_feat();
    },
    // 重置
    reset() {
      this.$refs["userListFrom"].resetFields();
      this.getArticleList();
    },
    // 分页
    changeLimit(pageSize, type) {
      switch (type) {
        case 1:
          this.current.per_page = pageSize;
          this.salesman_feat();
          break;
        case 2:
          this.drawer_current.per_page = pageSize;
          if (this.drawer_table == 1) {
            this.salesman_featOrder();
          } else if (this.drawer_table == 2) {
            this.salesman_featCategory();
          }
          break;
      }
    },
    changePage(page, type) {
      switch (type) {
        case 1:
          this.current.page = page;
          this.salesman_feat();
          break;

        case 2:
          this.drawer_current.page = page;
          if (this.drawer_table == 1) {
            this.salesman_featOrder();
          } else if (this.drawer_table == 2) {
            this.salesman_featCategory();
          }
          break;
      }
    },
    // 列表
    salesman_feat() {
      this.listLoading = true;
      let data = Object.assign(this.list_form(), this.current);
      salesman_feat(data).then((res) => {
        this.listLoading = false;
        if (res.errcode == 0) {
          this.list = res.data.data;
          this.totalCount = res.data.total;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    list_form() {
      let form = JSON.parse(JSON.stringify(this.form));

      return form;
    },
    // 获取业务员
    salesman_getSalesman() {
      salesman_getSalesman().then((res) => {
        if (res.errcode == 0) {
          this.salesman_list = res.data.list;
        }
      });
    },
    // 业务员订单
    salesman_featOrder() {
      this.drawer_listLoading = true;
      let data = Object.assign(this.drawer_form, this.drawer_current);
      salesman_featOrder(data).then((res) => {
        if (res.errcode == 0) {
          res.data.list.map((e) => {
            e.real_send_money = this.$toFixed(
              parseFloat(e.send_money) - parseFloat(e.return_money)
            );
          });
          this.drawer_list = res.data.list;
          this.drawer_totalCount = res.data.total;
        } else {
          this.$message.error(res.errmsg);
        }
        this.drawer_listLoading = false;
      });
    },
    // 业务员分类
    salesman_featCategory() {
      this.drawer_listLoading = true;
      let data = Object.assign(this.drawer_form, this.drawer_current);
      salesman_featCategory(data).then((res) => {
        if (res.errcode == 0) {
          this.drawer_list = res.data.data;
          this.drawer_totalCount = res.data.total;
        } else {
          this.$message.error(res.errmsg);
        }
        this.drawer_listLoading = false;
      });
    },
    // 侧滑弹窗
    handleDrawer(scope, type) {
      this.drawer_limit = Number(20);
      this.drawer_form.payment_days = scope.row.payment_days;
      this.drawer_form.salesman_id = scope.row.salesman_id;
      this.drawer_header_title = scope.row.salesman;
      this.drawer_header_payment_days = scope.row.payment_days;
      this.drawer_table = type;
      switch (type) {
        case 1:
          this.drawer_title = "订单业绩";
          this.salesman_featOrder();
          break;
        case 2:
          this.drawer_title = "分类业绩";
          this.salesman_featCategory();
          break;
      }
      this.goods_drawer = true;
    },
    // 侧滑关闭
    closedDrawer() {
      this.drawer_list = [];
      this.drawer_totalCount = 1;
      this.drawer_limit = 20;
      this.drawer_current.page = 1;
      this.drawer_current.per_page = 20;
    },
    // 导出
    handleExport(type) {
      switch (type) {
        case 1:
          this.export("index");
          break;
        case 2:
          if (this.drawer_table == 1) {
            this.export("order");
          } else if (this.drawer_table == 2) {
            this.export("category");
          }
          break;
      }
    },
    // 导出方法
    export(name) {
      let func = null;
      let data = {};
      let export_name = "";
      switch (name) {
        case "index":
          func = exportFeat;
          data = Object.assign(this.form);
          export_name = "业务员业绩";
          break;
        case "order":
          func = exportFeatOrder;
          data = Object.assign(this.drawer_form);
          export_name = "业务员订单业绩";
          break;
        case "category":
          func = exportFeatCategory;
          data = Object.assign(this.drawer_form);
          export_name = "业务员分类业绩";
          break;
      }
      const notify = this.$notify.info({
        title: "开始导出...",
        type: "success",
        duration: 0,
      });
      func(data).then((res) => {
        this.exportMethod(res, export_name, notify);
      });
    },
    // 计算每列的和
    // getSummaries(param) {
    //   const { columns, data } = param;
    //   const sums = [];
    //   columns.forEach((column, index) => {
    //     if (index === 1) {
    //       sums[index] = "合计：";
    //       return;
    //     } else if (index == 3) {
    //       sums[index] = this.total;
    //     }
    //   });

    //   return sums;
    // },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.mainsu {
  .mainor_form form {
    width: calc(100% - 160px);
  }
}
.new_navbar_svg {
  vertical-align: middle;
  margin-left: 5px;
  transform: translateY(-1px);
  use {
    fill: #606266;
  }
}
</style>
